<template>
  <div class="index" @dragover="dover(event)">
    <v-app id="inspire" dark>
        <!-- 在线用户图标区域 -->
        <v-navigation-drawer
          model-value
          class="pt-4"
          rail>
          <UsersOnline />
          <!-- 上述圆形图像组件，添加 rounded 属性则为圆角方形 -->
        </v-navigation-drawer>

        <!-- 系统主控区域 -->
        <v-navigation-drawer
          width="256"
          v-model="drawer"
          color="grey-lighten-4">

          <!-- 系统主图标菜单区域 -->
          <v-sheet
            color="#ffd"
            height="210"
            width="100%"
            ref="layout_2"
            align="center"
            style="padding:15px;"
          >
            <!-- 系统图标主菜单-->
            <Menus @onIconMenus="getIconMenus" :menus="menus" :submenus="submenus" />
          </v-sheet>

          <!-- 子菜单扩展面板 -->
          <v-expansion-panels>
            <v-expansion-panel
              v-mode="submenus"
              v-for="item in submenus"
              :key="index"
              :title="item.title"
              :text="item.text"
              @click="subMenu(menus.menu,item.title)"
            ></v-expansion-panel>
          </v-expansion-panels>

          <!-- 用户登录后的提示信息 -->
          <v-sheet
            color="grey-lighten-4"
            width="100%"
            ref="layout_3"
            style="margin-top:25px; padding:15px;"
          >
            <!--实验基本信息提示-->
            <BaseInfo />
          </v-sheet>
          
        </v-navigation-drawer>

        <!-- 系统顶栏标题及管理区域 color="blue-darken-3" -->
        <v-app-bar 
          class="px-3"
          height="64"
          color="cyan-darken-2"
          >
            <!--下面默认为左侧控制栏的折叠图标-->
            <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>

            <!--标题栏-->
            <v-toolbar-title>
              <div style="float:left; font-size:21px; font-weight:bold;">集装箱码头生产核心业务实训系统</div>
            </v-toolbar-title>

            <v-spacer><!--垫片--></v-spacer>

            <!--管理/工具栏-->
            <v-toolbar-items>
              <!-- 独立数据大屏 -->
              <v-btn variant="text" @click="toDataLargeScreen" style="font-size:15px;">数据大屏</v-btn>

              <v-divider vertical><!--分隔线--></v-divider>

              <!-- 返回系统桌面 -->
              <v-btn variant="text" @click="toHomePage" style="font-size:15px;">系统桌面</v-btn>

              <v-divider vertical><!--分隔线--></v-divider>

              <!-- 系统设置菜单 -->
              <v-menu>
                <template v-slot:activator="{ props }">
                  <v-btn color="white" v-bind="props" style="font-size:15px;">系统设置</v-btn>
                </template>
                <v-list>
                  <v-list-item
                    v-for="(item, index) in set_items"
                    :key="index"
                    :value="index"
                  >
                    <v-list-item-title>{{ item.title }}</v-list-item-title>
                  </v-list-item>
                </v-list>
              </v-menu>

              <v-divider vertical><!--分隔线--></v-divider>

              <!-- 退出系统登录 -->
              <v-btn variant="text" style="font-size:15px;">退出登录</v-btn>

              <v-divider vertical><!--分隔线--></v-divider>

              <!-- 协同操作开关 -->
              <v-switch
                style="margin: 5px 20px;"
                v-model="optration"
                hide-details
                true-value="深色"
                false-value="浅色"
                :label="`${optration}`"
              ></v-switch>

              <v-divider vertical><!--分隔线--></v-divider>

              <!-- 知识库查询 -->
              <v-responsive max-width="300" style="margin:12px 20px; width:200px;">
                <v-text-field
                  bg-color="grey-lighten-2"
                  class="rounded-pill overflow-hidden"
                  density="compact"
                  hide-details
                  variant="solo"
                >知识库查询...</v-text-field>
              </v-responsive>

            </v-toolbar-items>
        </v-app-bar>

        <!--系统操作主窗口-->
        <v-main  style="background:#eeeeee;">
          <router-view></router-view>
        </v-main>

        <!--悬浮球-用于新建项目 elevation="9"-->
        <v-btn 
            fab="true"
            icon="mdi-plus"
            color="green" 
            x-large
            position="absolute"
            direction
            open-on-hover
            outlined="true"
            size="64"
            draggable="true"
            style="right:30px; bottom:72px; z-index:9999;"
            @click="createProject"
          ></v-btn>

        
        <!-- <v-btn icon="mdi-heart" color="primary" width="48" height="48" style="background:#036; z-index:99999;"></v-btn> -->
      
        
        <!-- https://vuetify.cn/zh-Hans/components/floating-action-buttons/ -->

        <!--底部消息栏-->
        <v-footer
          app
          height="72"
          style="background:#eeeeee;"
        >
          <v-text-field
            bg-color="grey-lighten-2"
            density="compact"
            hide-details
            variant="solo"
            class="rounded-pill overflow-hidden centered-input"
          >此处使用状态进度条显示实验项目的完成进度（实验进程），鼠标悬停可显示：详细进度描述</v-text-field>
        </v-footer>
      </v-app>
  </div>
</template>

<script>
//import { mapState } from "Vuex" //Vuex提供的快速读取store数据的引用
import Menus from "./components/Menus.vue"
import BaseInfo from "./components/BaseInfo.vue"
import UsersOnline from "./components/UsersOnline.vue"

//Vue默认路由根路径
const base_url = "/#";

export default {
  name: 'Index',
  props: {
    //msg: String
  },
  components: {
    Menus,
    BaseInfo,
    UsersOnline
  },
  data()
  {
      return { 
          //左侧菜单区域控制
          drawer: null,
          //实验模式开关
          optration: "浅色",
          // 默认菜单项
          menus: {menu:"装卸计划"}, 
          //默认子菜单标题及描述
          submenus: [
              {title:"船期表",text:"查看EDI中心分发的船期表数据，检索最近5天的船期资料，并致电船公司确认。",color:"#036"},
              {title:"导入舱单",text:"将EDI中心分发的舱单数据，导入为计划编制数据，用于装卸作业计划的编制。"},
              {title:"锚地船舶",text:"通过系统检索，查询本港锚地待作业船舶，了解船舶进港时间及装货物计划。"},
              {title:"码头船舶",text:"查看当前泊位船舶分布图，查询在港作业的船舶情况，为编制新的船舶作业计划做好准备。"},
              {title:"编制装卸作业计划",text:"根据已有资料和数据，开始编制船舶装卸作业计划，主要包括：船舶、船位、载重吨，计划装载或卸载的货种、数量，及计划装卸作业时间。"}
          ],
          set_items: [
            { title: '系统设置' },
            { title: '用户导入' },
            { title: '实验报告' },
            { title: '实验统计' },
          ],
      }
  },
  methods: {
    //创建一个实验项目
    createProject(){
      alert("创建一个实验项目");
    },
    //返回主页面
    toHomePage(){
      location.href = base_url + "/";
    },

    //主菜单选择
    getIconMenus(data){
      this.menus = data.menus;
      this.submenus = data.submenus;
    },
    //子菜单路由
    subMenu(a,b){
      if(a=="装卸计划"){
        if(b=="船期表"){
          location.href = base_url + "/p_1_1"
        }
        if(b=="导入舱单"){
          location.href = base_url + "/p_1_2"
        }
      }
      if(a=="泊位策划"){
        if(b=="船期表"){
          location.href = base_url + "/p_2_1"
        }
        if(b=="收箱及出口箱数据"){
          location.href = base_url + "/p_2_2"
        }
      }
      if(a=="船舶策划"){
        if(b=="标题3-1"){
          location.href = base_url + "/p_3_1"
        }
        if(b=="标题3-2"){
          location.href = base_url + "/p_3_2"
        }
      }
      if(a=="堆场策划"){
        if(b=="标题4-1"){
          location.href = base_url + "/p_4_1"
        }
        if(b=="标题4-2"){
          location.href = base_url + "/p_4_2"
        }
      }
      if(a=="闸口策划"){
        if(b=="标题5-1"){
          location.href = base_url + "/p_5_1"
        }
        if(b=="标题5-2"){
          location.href = base_url + "/p_5_2"
        }
      }
      if(a=="EDI中心"){
        if(b=="标题6-1"){
          location.href = base_url + "/p_6_1"
        }
        if(b=="标题6-2"){
          location.href = base_url + "/p_6_2"
        }
      }
    }
  },
  //专门用来读取Vuex集中管理的数据，可以放置到任何组件中，自由读取stroe中的状态数据
  computed: {
    //...mapState(["data_obj_name"])
  },
}
</script>

<style scoped>
  .cir6 {
      border-radius: 6px;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
  }
  .centered-input{
    text-align: center;
  }
</style>
